<template>
  <div class="header-bar">
    <div class="logo">
      <img src="@/assets/logo.png" alt="logo" title="logo" />
    </div>
    <div class="center" v-if="timeout">
      <span>正在退出中</span>
      <span style="color: red">{{ countdown }}</span>
      <span>s,欢迎再次使用！</span>
    </div>
    <div class="win-func">
      <img
        src="@/assets/svg/decrease.svg"
        alt="最小化"
        title="最小化"
        @click="winFunc(0)" />
      <img
        :src="
          winStatus
            ? require('@/assets/svg/minimization.svg')
            : require('@/assets/svg/maximize.svg')
        "
        :alt="winStatus ? '最小化' : '最大化'"
        :title="winStatus ? '最小化' : '最大化'"
        @click="winFunc(1)" />
      <img
        src="@/assets/svg/close.svg"
        alt="关闭"
        title="关闭"
        @click="winFunc(2)" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'headerBar',
  data() {
    return {
      winStatus: false,
      countdown: 5,
      timeout: null
    }
  },
  methods: {
    /**
     * 窗口功能
     */
    winFunc(type) {
      switch (type) {
        case 0:
          this.$ele.ipcRenderer.send('windows-win')
          break
        case 1:
          this.winStatus = !this.winStatus
          this.$ele.ipcRenderer.send('windows-max', this.winStatus)
          break
        default:
          this.$confirm('确定要退出吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            callback: action => {
              const countDown = this.countdown
              if (action === 'confirm') {
                this.countdownFunc()
                this.$message.success({
                  dangerouslyUseHTMLString: true,
                  message: `正在退出中...`,
                  duration: countDown * 1000,
                  offset: 45,
                  onClose: () => {
                    this.$ele.ipcRenderer.send('windows-close')
                  }
                })
              }
            }
          })
          break
      }
    },
    countdownFunc() {
      if (this.countdown === 0) {
        clearInterval(this.timeout)
        this.timeout = null
      }
      this.timeout = setInterval(() => {
        this.countdown--
      }, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timeout)
    this.timeout = null
  }
}
</script>
<style lang="scss" scoped>
.header-bar {
  width: 100%;
  height: 40px;
  padding: 0 0 0 10px;
  background: #24adf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  -webkit-app-region: drag;
  .logo {
    height: 100%;
    img {
      padding: 10px 0;
      height: 100%;
    }
  }
  .win-func {
    display: flex;
    height: 100%;
    img {
      padding: 10px;
      cursor: pointer;
      &:hover {
        &:not(:last-child) {
          background: #f3f3f3;
        }
        &:last-child {
          background: #f15151;
        }
      }
    }
  }
}
</style>
